<template>
    <div>
        <el-container height="130px">
            <el-header>
                <HomeHeader></HomeHeader>
            </el-header>
        <el-container>
            <el-aside width="200px">
                <HomeAside></HomeAside>
            </el-aside>
            <el-main>
                <div v-if="show">
                    <HomeCurrent></HomeCurrent>
                </div>
                <router-view v-else></router-view>
            </el-main>
        </el-container>
        </el-container>

    </div>
</template>

<script>
import HomeHeader from '@/components/home/HomeHeader';
import HomeAside from '@/components/home/HomeAside';
import HomeCurrent from '@/components/home/HomeCurrent';
    export default{
        mounted(){
            this.showHome(this.$route);
        },
        data(){
            return{
                show:false
            }
        },
        components:{
            HomeHeader,
            HomeAside,
            HomeCurrent
        },
        methods:{
            showHome(value){
                if(value.path === '/home'){
                    this.show=true;
                }else{
                    this.show=false;
                }
            }
        },
        watch:{
            $route(value){
                // console.log(value);
                this.showHome(value);
            }
        }
    }
</script>

<style lang="scss" scoped>
    div{
        .el-container{
            background-color: #B3C0D1;
            // .el-header{}
            .el-container{
                .el-aside{
                    background-color: #D3DCE6;
                }
                .el-main{
                    background-color: #E9EEF3;
                }
            }
        }
    }
</style>